<template>
	<view>
		<view class="titleStyPOs">
			<div style="height:30rpx"></div>
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<Title :title="title" />
			<view class="flex-start ml-40 mt-40">
				<image src="../../../../static/images/user/newUI/goldB.png" mode="" class="w-40 h-40 mt-20"></image>
				<p class="font-bold fz28 text-black ml-10 mt-20">{{$t('我的积分')}}</p>
				<p class="font-bold fz60 text-black ml-15">{{scoreAll}}</p>
			</view>
			<u-search :placeholder="$t('请输入搜索内容')" v-model="keyword" shape="round" :clearabled="true" class="searchSty" @search="goFilter" @custom="goFilter" :action-text="$t('搜索')"></u-search>
		</view>
		<view :style="`height: calc(320rpx + ${statusBarHeight}px);`"></view>
		<view class="contentBox">
			<view class="mt-15" v-for="(item, index) in productList" @click="goDetail(item)">
				<view  v-if="index % 2 == 0" class="liveBoxLeft mt-15">
					<view class="imgBoxSty">
						<image :src="getImageUrl(item.logo || '')" mode="aspectFill"></image>
					</view>
					<view class="pl-24 pr-24 bg-white pb-20" style="border-radius: 0 0 20rpx 20rpx;">
						<p class="fz26 text-333 font-bold pt-18" :style="langR == 'zh'?'max-height: 100rpx;':'height: 100rpx;'">{{item[plang('name')]}}</p>
						<p class="numberSty">{{item.score}} <span class="fz22">{{$t('积分')}}</span></p>
						<p v-if="item.is_express_price == '1'" class="fz22 text-999 mt-5">{{$t('不含运费')}}</p>
						<p v-else class="fz22 text-999 mt-5">{{$t('含运费')}}</p>
					</view>
				</view>
				<view v-else class="liveBox mt-15">
					<view class="imgBoxSty">
						<image :src="getImageUrl(item.logo || '')" mode="aspectFill"></image>
					</view>
					<view class="pl-24 pr-24 bg-white pb-20" style="border-radius: 0 0 20rpx 20rpx;">
						<p class="fz26 text-333 font-bold pt-18">{{item[plang('name')]}}</p>
						<p class="numberSty">{{item.score}} <span class="fz22">{{$t('积分')}}</span></p>
						<p v-if="item.is_express_price == '1'" class="fz22 text-999 mt-5">{{$t('不含运费')}}</p>
						<p v-else class="fz22 text-999 mt-5">{{$t('含运费')}}</p>
					</view>
				</view>
			</view>
			<view style="clear: both;"></view>
			<view class="h-30"></view>
			<div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">{{$t('没有更多了')}}</div>
		</view>
	</view>
</template>

<script>
	import { getScoreHome, scoreExchange, scoreVirtual, getUserHomepage, getScoreTotal } from '@/api/basic'
	import Title from './../components/title.vue'
	
	export default {
		components: {
			Title
		}, 
		data() {
			return {
				title: this.$t('积分商城'),
				keyword: '',
				nomore: false,
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				paramsList: {
					page: 1,
					limit: 10
				},
				scoreAll: '',
				productList: [],
				countItem: 0,
			}
		},
		mounted() {
			this.getScoreHome(true)
			// this.getUserHomepage()
			this.scoreVirtual()
			this.getScoreTotal()
		},
		created() {
			window.onNativeShow = this.getScoreHome;
			window.onNativeShow = this.getScoreTotal;
		},
		methods: {
			goFilter(e) {
				this.paramsList.keyword = e
				this.getScoreHome(true)
			},
			getScoreTotal() {
				getScoreTotal().then(res => {
					this.scoreAll = res.data.data.total
				})
			},
			// getUserHomepage() {
			// 	getUserHomepage({user_id: uni.getStorageSync("user_id")}).then(res => {
			// 		this.scoreAll = res.data.data.userInfo.score
			// 	})
			// },
			scoreVirtual() {
				scoreVirtual().then(res => {
					if(res.data.data){
						this.productList.unshift(res.data.data)
					}
					
					
				})
			},
			goDetail(item) {
				console.log('--------', item)
				uni.setStorageSync('mallDetail',item)
				uni.navigateTo({
					url: `/pages/tabbar/newUser/Mall/mallDetail`
				})
			},
			//下拉刷新
			onPullDownRefresh() {
				this.getScoreHome(true)
				this.scoreVirtual()
			},
			//上拉加载
			onReachBottom() {
				if (this.productList.length >= this.countItem) {
					this.nomore = true;
					return;
				}
				this.paramsList.page++
				this.getScoreHome()
			},
			getScoreHome(init) {
				if (init) {
					this.paramsList.page = 1
					this.nomore = false;
				}
				getScoreHome(this.paramsList).then(res => {
					this.countItem = res.data.data.count;
					console.log('this.countItem----',this.countItem)
					if (this.paramsList.page == 1) {
						this.productList = res.data.data.list;
					} else {
						this.productList = [...this.productList, ...res.data.data.list]
					}
					//当前请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}没有更多了
					if (res.data.data.length == 0) {
						this.nomore = true;
						console.log('this.nomore----',this.nomore)
					}
					// 结束下拉刷新
					uni.stopPullDownRefresh()
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	page {
		background-color: #F6F7FB;
	}
	.liveBoxLeft {
		float: left;
		width: 49%;
		.infoImageSty {
			width: 340rpx;
			height: 400rpx;
		}
		.liveInfoBox {
			width: 340rpx;
			min-height: 100rpx;
			border-radius: 0 0 18rpx 18rpx;
		}
	}
	.priceSty {
		color: #FF7000;
		font-size: 30rpx;
		margin-left: 16rpx;
		margin-top: 20rpx;
	}
	.liveBox {
		width: 49%;
		float: right;
		.infoImageSty {
			width: 340rpx;
			height: 400rpx;
		}
		.liveInfoBox {
			width: 340rpx;
			min-height: 100rpx;
			border-radius: 0 0 18rpx 18rpx;
		}
	}
	.searchSty {
		width: 95% !important;
		display: flex;
		margin-left: 26rpx !important;
		margin-top: 26rpx !important;
		margin-bottom: 30rpx !important;
		/deep/ .u-content {
			background-color: #fff !important;
			height: 78rpx !important;
			position: relative;
			z-index: 2;
		}
		/deep/ .u-input {
			background-color: #fff !important;
		}
		/deep/ .u-icon__icon {
			color: #74C2FF !important;
		}
		/deep/ .u-action {
			width: 110rpx !important;
			height: 50rpx !important;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%) !important;
			text-align: center;
			line-height: 50rpx;
			font-family: PingFang SC;
			color: #fff;
			font-weight: 500;
			font-size: 26rpx;
			letter-spacing: 0px;
			border-radius: 500rpx;
			position: absolute;
			z-index: 10;
			right: 30rpx;
		}
	}
	.titleStyPOs {
		background: #F6F7FB url("/static/backcolorImg.png") no-repeat top / 100%;
		position: fixed;
		width: 100%;
		z-index: 10;
	}
	.contentBox {
		// margin-top: -20rpx;
		// width: 100%;
		// height: auto;
		background-color: #fff;
		border-radius: 56rpx 56rpx 0 0;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-between;
		padding-left: 25rpx;
		padding-right: 25rpx;
		padding-bottom: 20rpx;
		
		// .productSty {
		// 	width: 46%;
		// 	margin-top: 20rpx;
			
			.numberSty {
				color: #FF5A00;
				font-size: 35rpx;
				font-weight: 600;
				margin-top: 15rpx;
			}
		// }
		.imgBoxSty {
			// width: 46%;
			height: 338rpx;
			background-color: #E8F7FF;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 26rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 26rpx;
			}
		}
		.pl-24{
			height: 226rpx;
			.pt-18{
				display: -webkit-box;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			}
			

		}
	}
</style>
